<template>
  <div class="h-full w-full" v-loading="iframeOpacity == 0">
    <template v-if="useDataDashboardThemeStore.dataDashboardType == 1">
      <!-- <iframe ref="mapIframe" :src="mapurl" :style="`opacity: ${iframeOpacity};`" frameborder="0" width="100%"
                height="100%" @load="iframeLoaded"
                v-if="useDataDashboardThemeStore.dataDashboardButtonId == 1 || useDataDashboardThemeStore.dataDashboardType == 1" /> -->
      <mapmark @amapLoaded="iframeLoaded" />
    </template>
    <template v-if="useDataDashboardThemeStore.dataDashboardType == 2">
      <!-- <iframe :style="`opacity: ${iframeOpacity};`" :src="unitymap" @load="iframeLoaded" frameborder="0" width="100%"
        height="100%" v-if="useDataDashboardThemeStore.dataDashboardButtonId == 1" /> -->
      <unitymaps 
        @amapLoaded="iframeLoaded"
        v-if="useDataDashboardThemeStore.dataDashboardButtonId == 1 && useDataDashboardThemeStore.GET_SETTING('projectInfo')?.viewMode"
      />
      <template
        v-if="
          useDataDashboardThemeStore.dataDashboardButtonId == 2 &&
          useDataDashboardThemeStore.dataDashboardType == 2
        "
      >
        <bgcontent v-if="useDataDashboardThemeStore.dataDashboardIsHidden == 2 || useDataDashboardThemeStore.GET_SETTING('projectInfo').planMode==2">
          <clickMap />
        </bgcontent>
        <unitymaps
          v-if="useDataDashboardThemeStore.dataDashboardIsHidden == 1 && useDataDashboardThemeStore.GET_SETTING('projectInfo').planMode==1 && useDataDashboardThemeStore.GET_SETTING('projectInfo')?.viewMode" 
        />
      </template>
      <template
        v-if="
          useDataDashboardThemeStore.dataDashboardButtonId == 5 &&
          useDataDashboardThemeStore.dataDashboardType == 2
        "
      >
        <bgcontent>
          <configuration class="z-[1]" />
        </bgcontent>
      </template>
      <template v-if="useDataDashboardThemeStore.dataDashboardButtonId == 3">
        <iframe
          :src="useDataDashboardThemeStore.GET_SETTING('projectInfo').VR"
          frameborder="0"
          width="100%"
          height="100%"
          v-if="
            useDataDashboardThemeStore
              .GET_SETTING('projectInfo')
              ?.VR?.startsWith('http')
          "
        />
        <div
          v-else
          class="w-[100%] h-[100%] text-[#fff] flex justify-center items-center"
        >
          <img src="@/assets/screenimg/null-copy.png" class="relative top-[25px]" />
        </div>
      </template>

      <template v-if="useDataDashboardThemeStore.dataDashboardButtonId == 4">
        <bgcontent>
          <iframe
            :src="useDataDashboardThemeStore.GET_SETTING('projectInfo').threeD"
            frameborder="0"
            width="100%"
            height="100%"
            v-if="
              useDataDashboardThemeStore
                .GET_SETTING('projectInfo')
                ?.threeD?.startsWith('http')
            "
          />
          <div
            v-else
            class="w-[100%] h-[100%] text-[#fff] flex justify-center items-center"
          >
            <img src="@/assets/screenimg/null-copy.png" />
          </div>
        </bgcontent>
      </template>
    </template>
    <template v-if="useDataDashboardThemeStore.dataDashboardType == 3">
      <regulatorymap />
    </template>
  </div>
</template>

<script lang="ts" setup>
import {
  getBuildingInfo,
  getDrawingInfo,
  getMonitorInfo,
  getFacilityInfo,
  getDeviceInfo,
  getDeviceBaseInfo
} from "@/api/screen";
import facilityInformationPopup from "./components/facilityInformationPopup.vue";
import monitorInfoPopup from "./components/monitorInfoPopup.vue";
import bgcontent from "./components/bgcontent.vue";

import deviceInfoPopup from "./components/deviceInfoPopup.vue";
import { addDialog } from "@/components/ReDialog";
import { useDataDashboardThemeStoreHook } from "@/store/modules/data-dashboard-theme";

const useDataDashboardThemeStore = useDataDashboardThemeStoreHook();
const unitymap =
  window.location.protocol + "//" + window.location.host + "#/unitymap";
import clickMap from "./components/projectplan.vue";
import configuration from "./components/configuration.vue";
import mapmark from "./components/mapmark.vue";
import regulatorymap from "./components/regulatory-map.vue";
import unitymaps from "./components/unitymap.vue";
// const mapIframe = ref()
const channel = ref();
const iframeOpacity = ref(0);

onBeforeMount(() => {
  channel.value = new BroadcastChannel("data-dashboard-them");
  channel.value.onmessage = function (event) {
    if (event.data.type == "mapmarkclick") {
      let item = event.data.value;
      let itemInfo = event.data.value.info;
      // let itemInfo = item.info;
      if (item?.type == "building") {
        // ICON_TYPE_Map
        useDataDashboardThemeStore.CHANGE_SETTING({
          key: "dataDashboardIsHidden",
          value: 2
        });
        // 点击图纸标点后获取建筑及初始化图纸信息，默认选中第一张图纸
        getBuildingInfo({ buildingId: itemInfo?.buildingId }).then(res => {
          useDataDashboardThemeStore.building.buildingInfo = res.result;
          if (res.result?.drawingInfo && res.result?.drawingInfo.length > 0) {
            res.code == 200 &&
              getDrawingInfo({
                buildingId: res.result?.buildingInfo?.buildingId,
                drawingId: res.result?.drawingInfo[0]?.drawingId
              }).then(res1 => {
                useDataDashboardThemeStore.building.drawingInfo = res1.result;
                useDataDashboardThemeStore.building.checkedDrawingId =
                  res.result.drawingInfo[0].drawingId;
                useDataDashboardThemeStore.drawmapid =
                  res.result.drawingInfo[0].drawingId;
              });
          }
        });
      } else if (item?.type == "monitor") {
        getMonitorInfo({ monitorId: itemInfo?.monitorId }).then(res => {
          addDialog({
            title: res.result?.monitorName,
            width: "800px",
            draggable: true,
            hideFooter: true,
            fullscreen: false,
            fullscreenIcon: true,
            closeOnClickModal: false,
            props: {
              monitorUrl: res.result?.url,
              playDuration: res.result?.playDuration
            },
            contentRenderer: () => h(monitorInfoPopup)
          });
        });
      } else if (item?.type == "facilit") {
        getFacilityInfo({ facilitId: itemInfo?.facilitId }).then(res => {
          res.code == 200 &&
            addDialog({
              title: res.result?.facilitName,
              width: "800px",
              draggable: true,
              hideFooter: true,
              fullscreen: false,
              fullscreenIcon: true,
              closeOnClickModal: false,
              props: {
                formInline: res.result
              },
              contentRenderer: () => h(facilityInformationPopup)
            });
        });
      } else if (item?.type == "device") {
        getDeviceBaseInfo({ deviceId: itemInfo?.deviceId }).then(res => {
          res.code == 200 &&
            addDialog({
              title: res.result?.deviceName,
              width: "1100px",
              draggable: true,
              fullscreen: false,
              fullscreenIcon: true,
              closeOnClickModal: false,
              props: {
                isLoading: false,
                newFormInline: res.result,
                id: itemInfo?.deviceId
              },
              hideFooter: true,
              contentRenderer: () => h(deviceInfoPopup)
            });
        });
      }
    } else {
      console.log(event.data, "点击了");
    }
  };
});
onUnmounted(() => {
  channel.value.close();
});
watch(
  () => useDataDashboardThemeStore.dataDashboardType,
  (newval, oldval) => {
    if (useDataDashboardThemeStore.dataDashboardButtonId == 1) {
      iframeOpacity.value = 0;
    } else {
      iframeOpacity.value = 1;
    }
  },
  {
    immediate: true,
    deep: true
  }
);
watch(
  () => useDataDashboardThemeStore.dataDashboardButtonId,
  (newval, oldval) => {
    if (
      useDataDashboardThemeStore.dataDashboardButtonId == 1 &&
      useDataDashboardThemeStore.dataDashboardType == 2
    ) {
      iframeOpacity.value = 0;
    } else {
      iframeOpacity.value = 1;
    }
  },
  {
    immediate: true,
    deep: true
  }
);
const iframeLoaded = () => {
  iframeOpacity.value = 1;
};
</script>
